<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监控报警信息实况</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
  <style>
    body { overflow: hidden; } /* 去掉滚动条 */
    .marquee { white-space: nowrap; overflow: hidden; box-sizing: border-box; }
    .marquee span {
      display: inline-block; padding-left: 100%;
      animation: marquee 12s linear infinite;
    }
    @keyframes marquee {
      0% { transform: translate(0, 0); }
      100% { transform: translate(-100%, 0); }
    }
    .swiper { width: 100%; height: 120px; }
    .swiper-slide {
      text-align: center; display: flex; justify-content: center; align-items: center;
      background: #f8fafc; border-radius: 6px; font-size: 14px;
    }
  </style>
</head>
<body class="bg-gray-100">
  <div class="grid grid-cols-4 h-screen gap-4 p-4">
    
    <!-- 左侧三列：时间+轮播+图表 -->
    <div class="col-span-3 flex flex-col space-y-4">
      
      <!-- 顶部：标题 + 时间 -->
      <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-800">监控报警信息实况</h1>
        <div class="text-lg font-semibold text-gray-700" id="current-time"></div>
      </div>

      <!-- 滚动报警信息 -->
      <div class="bg-red-100 border-l-4 border-red-500 py-1 px-3">
        <div class="marquee">
          <span class="text-red-700 font-medium text-sm">
            紧急报警：服务器负载过高 | 网络延迟超过阈值 | 数据库连接异常 | 存储空间不足 | 磁盘IO过高 | 温度过热 | 进程异常
          </span>
        </div>
      </div>

      <!-- 轮播图 -->
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">服务器运行正常</div>
          <div class="swiper-slide">网络延迟正常</div>
          <div class="swiper-slide">存储空间充足</div>
          <div class="swiper-slide">系统温度正常</div>
        </div>
        <div class="swiper-pagination"></div>
      </div>

      <!-- 图表区：6个紧凑图表 -->
      <div class="grid grid-cols-3 grid-rows-2 gap-4 flex-1">
        <div class="bg-white rounded-lg shadow p-2"><canvas id="cpuChart"></canvas></div>
        <div class="bg-white rounded-lg shadow p-2"><canvas id="memoryChart"></canvas></div>
        <div class="bg-white rounded-lg shadow p-2"><canvas id="networkChart"></canvas></div>
        <div class="bg-white rounded-lg shadow p-2"><canvas id="storageChart"></canvas></div>
        <div class="bg-white rounded-lg shadow p-2"><canvas id="diskChart"></canvas></div>
        <div class="bg-white rounded-lg shadow p-2"><canvas id="tempChart"></canvas></div>
      </div>
    </div>
    
    <!-- 右侧一列：报警记录表格 -->
    <div class="col-span-1 bg-white rounded-lg shadow flex flex-col p-2">
      <h2 class="text-base font-bold mb-2">报警记录</h2>
      <div class="overflow-y-auto flex-1">
        <table class="min-w-full text-sm">
          <thead class="bg-gray-200 sticky top-0">
            <tr>
              <th class="py-1 px-2 border">时间</th>
              <th class="py-1 px-2 border">类型</th>
              <th class="py-1 px-2 border">级别</th>
            </tr>
          </thead>
          <tbody>
            <tr class="odd:bg-gray-50">
              <td class="py-1 px-2 border">15:30:22</td>
              <td class="py-1 px-2 border">CPU过载</td>
              <td class="py-1 px-2 border text-red-600">紧急</td>
            </tr>
            <tr class="odd:bg-gray-50">
              <td class="py-1 px-2 border">14:45:10</td>
              <td class="py-1 px-2 border">网络延迟</td>
              <td class="py-1 px-2 border text-yellow-600">警告</td>
            </tr>
            <tr class="odd:bg-gray-50">
              <td class="py-1 px-2 border">13:20:05</td>
              <td class="py-1 px-2 border">存储不足</td>
              <td class="py-1 px-2 border text-orange-600">严重</td>
            </tr>
            <tr class="odd:bg-gray-50">
              <td class="py-1 px-2 border">12:05:44</td>
              <td class="py-1 px-2 border">温度过高</td>
              <td class="py-1 px-2 border text-red-600">紧急</td>
            </tr>
            <tr class="odd:bg-gray-50">
              <td class="py-1 px-2 border">11:40:12</td>
              <td class="py-1 px-2 border">进程异常</td>
              <td class="py-1 px-2 border text-yellow-600">警告</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

<script>
  // 更新时间
  function updateTime() {
    const now = new Date();
    const options = { timeZone: 'Asia/Shanghai', hour12: false,
      year: 'numeric', month: '2-digit', day: '2-digit',
      hour: '2-digit', minute: '2-digit', second: '2-digit'};
    document.getElementById('current-time').textContent = now.toLocaleString('zh-CN', options);
  }
  setInterval(updateTime, 1000); updateTime();

  // Swiper
  const swiper = new Swiper('.swiper', {
    loop: true, autoplay: { delay: 2500 },
    pagination: { el: '.swiper-pagination', clickable: true }
  });

  // 生成图表
  function makeChart(id, type, label, data, color) {
    return new Chart(document.getElementById(id), {
      type, data: {
        labels: ['00','04','08','12','16','20'],
        datasets: [{label, data, borderColor: color, backgroundColor: color+'55', fill: true}]
      },
      options: { responsive: true, plugins:{legend:{display:false}}, scales:{y:{beginAtZero:true,max:100}} }
    });
  }

  makeChart('cpuChart','line','CPU使用率',[30,50,70,65,80,75],'#36a2eb');
  makeChart('memoryChart','bar','内存使用率',[40,55,65,70,85,80],'#ff6384');
  makeChart('networkChart','line','网络利用率',[20,25,30,40,35,50],'#4bc0c0');
  new Chart(document.getElementById('storageChart'),{
    type:'doughnut',
    data:{labels:['已用','剩余'],datasets:[{data:[70,30],backgroundColor:['#ff9f40','#36a2eb']}]}
  });
  makeChart('diskChart','line','磁盘IO',[15,30,45,60,40,50],'#9966ff');
  makeChart('tempChart','bar','温度',[50,55,60,70,65,75],'#ffcd56');
</script>
</body>
</html>
